<template>
        <el-menu
        :unique-opened="true"
        :default-active="$route.path"
        class="slider"
        background-color="#2e2727"
        text-color="#f5eded"
        active-text-color="#000"
        router
        >
        <el-menu-item index="/main" >
          <i class="el-icon-menu"></i>
          <span slot="title">首页</span>
        </el-menu-item>

        <el-submenu v-for="(item,index) in menuList" :key="index" :index='item.id'>
          <template slot="title">
            <i :class="item.icon"></i>
            <span>{{item.title}}</span>
          </template>
          <el-menu-item-group >
            <el-menu-item v-for="child in item.children" :key="child.id" :index='child.index'>{{child.childtitle}}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

      </el-menu>
</template>

<script>
export default {
  name: 'Slider',
  data () {
    return {
      menuList: [
        {
          id: '1',
          title: '用户管理',
          icon: 'el-icon-location',
          children: [
            {
              index: '/userInfo',
              childtitle: '用户信息'
            }
          ]
        },
        {
          id: '2',
          title: '献血管理',
          icon: 'el-icon-location',
          children: [
            {
              index: '/record',
              childtitle: '献血管理'
            },
            {
              index: '/suyuan',
              childtitle: '记录追溯'
            }
          ]
        },
        {
          id: '3',
          title: '血量统计',
          icon: 'el-icon-location',
          children: [
            {
              index: '/provinceBloodVolume',
              childtitle: '省份血量'
            },
            {
              index: '/bloodTypeBloodVolume',
              childtitle: '血型血量'
            }
          ]
        },
        {
          id: '4',
          title: '基础信息',
          icon: 'el-icon-location',
          children: [
            {
              index: '/provinceInfo',
              childtitle: '省份信息'
            },
            {
              index: '/bloodTypeInfo',
              childtitle: '血型信息'
            },
            {
              index: '/bloodBankInfo',
              childtitle: '血库信息'
            }
          ]
        },
		{
		id: '5',
		title: '个人信息',
		icon: 'el-icon-location',
		children: [
			{
			index: '/adminSelfInfo',
			childtitle: '个人信息'
			}
		]
		}
      ]

    }
  }

}
</script>
<style scoped>
.slider{
  height:100vh;
}
</style>

<style lang="less">
.el-menu{
 .el-submenu{
   .el-menu-item{
     padding-left:92px!important;
   }
 }
}
.el-submenu__title:hover{
   background-color: rgba(82,186,181,.38) !important;
}
.el-menu-item:focus,.el-menu-item:hover{
  background-color: rgba(82,186,181,.38) !important;
}

</style>
